import tou from "../../assets/images/tx.png";
import './index.scss';
import {DownOutlined} from '@ant-design/icons';
import {Dropdown, MenuProps, message} from "antd";
import Cookies from "js-cookie";
import {useEffect, useState} from "react";
import {info} from "../../api";
import {AxiosResponse} from "axios";
import {InfoType} from "../../util/publicType";
import {useAppDispatch} from "../../Hooks";
import {updateInfo} from "../../store/info";

// 公共头部
const Header = () => {
    // 个人信息
    const [infoData, setInfoData] = useState<InfoType>({
        id: "",
        jurisdictions: [],
        created_at: 0,
        lasted_at: 0,
        username: ""
    });

    // 存储
    const d = useAppDispatch();
    const items: MenuProps["items"] = [
        {
            key: 'auth',
            label: (
                <div onClick={() => {
                    Cookies.remove("token");
                    window.location.href = "/"
                }
                }>退出登录</div>
            ),
        },
        {
            key: 'reset',
            label: (<div>修改密码</div>),
        },
    ]

    useEffect(() => {
        info().then((r: AxiosResponse) => {
            const {data} = r.data.data;
            setInfoData(data);
            d(updateInfo(data));
        }, err => message.error(err))
    }, [])

    return (
        <div className="header-box">
            <h1 className="header-left">图书后台管理系统</h1>
            <div className="header-right">
                <Dropdown menu={{items}}>
                    <div>
                        <img src={tou} alt=""/>
                        <span>{infoData.username ? infoData.username : "未登录"}</span><DownOutlined/>
                    </div>
                </Dropdown>
            </div>
        </div>
    )
}

export default Header;